<template>
	<view class="return_box" :style="{ top: statusBarHeight + 'px' }">
		<image
			style="width: 64rpx; height: 64rpx"
			@click="goBack"
			:src="imgUrl + 'imgs/chaoshan/chaoshan_back.png'"
			mode=""
		></image>
	</view>

	<!-- 神仙背景 -->
	<view
		class="worship_detail_bgc"
		mode="aspectFill"
		:style="{
			width: clientWidth + 'px'
		}"
	></view>

	<!-- 神仙 -->
	<view
		class="worship_detail_border"
		:style="{
			top: navHeight ? navHeight - 10 + 'px' : '50rpx'
		}"
	>
		<image
			class="worship_detail_border_bgc"
			src="http://112.124.50.179:8888/imgs/worship/detail_border.png"
			mode=""
		></image>
		<image class="worship_detail_border_img" :src="detail.worshipPortrait" mode=""></image>
	</view>

	<!-- 姓名 -->
	<view
		class="worship_detail_name"
		:style="{
			top: navHeight ? `calc(${navHeight}px + 40rpx)` : '100rpx',
			left: `calc(${windowWidth / 2 - clientWidth / 2}px + 48rpx)`
		}"
	>
		<view class="worship_detail_name_content">
			{{ name.replace(/\(/g, '（').replace(/\)/g, '）') }}
		</view>
	</view>

	<!-- 音乐播放按钮 -->
	<view
		class="worship_music"
		:style="{
			top: navHeight ? `calc(${navHeight}px + 60)` : '120rpx',
			right: `calc(${windowWidth / 2 - clientWidth / 2 + 16}px)`
		}"
	>
		<view
			class="music_box display_flex"
			:class="['rotating-element', !musicPlay && 'paused']"
			@click="clickMusic"
		>
			<image :src="imgUrl + 'imgs/worship/music.png'" mode=""></image>
		</view>
		音乐
	</view>

	<!-- 还愿/抽签按钮 -->
	<view
		class="right_funcBox"
		:style="{
			top: navHeight ? `calc(${navHeight}px + 392rpx)` : '480rpx',
			right: `calc(${windowWidth / 2 - clientWidth / 2}px)`
		}"
	>
		<!-- 抽签 -->
		<image
			v-if="lotsType"
			:src="imgUrl + 'imgs/worship/worship_cq.png'"
			mode=""
			@click="chouqianRef.show = true"
		></image>
		<!-- 还愿 -->
		<image
			v-else
			:src="imgUrl + 'imgs/worship/worship_hy.png'"
			mode=""
			@click="huanyuanRef.show = true"
		></image>
	</view>

	<!-- 桌子：固定在底部 -->
	<view
		class="worship_detail_desk"
		:style="{
			width: clientWidth + 'px'
		}"
	>
		<!-- 祭品 -->
		<view class="desk_jp">
			<!-- 左边祭品 -->
			<swiper class="jp_left" circular :vertical="true" :interval="3000" :autoplay="true">
				<swiper-item v-for="(items, index) in Math.ceil(oblationList.leftList.length / 3)">
					<image
						v-for="(item, index) in oblationList.leftList.slice(
							(items - 1) * 3,
							items * 3
						)"
						:src="item.imageUrl"
						mode=""
					></image>
				</swiper-item>
			</swiper>
			<!-- 香坛 -->
			<view class="desk_xt">
				<!-- 烟雾 -->
				<view class="cigarette"></view>
				<!-- 坛子 -->
				<image class="tz" :src="imgUrl + 'imgs/worship/worship_xt.png'" mode=""></image>
				<!-- 蜡烛 -->
				<image v-if="lzInfo" class="lz" :src="lzInfo.imageUrl" mode=""></image>
			</view>
			<!-- 右边祭品 -->
			<swiper class="jp_right" circular :vertical="true" :interval="3000" :autoplay="true">
				<swiper-item v-for="(items, index) in Math.ceil(oblationList.rightList.length / 3)">
					<image
						v-for="(item, index) in oblationList.rightList.slice(
							(items - 1) * 3,
							items * 3
						)"
						:src="item.imageUrl"
						mode=""
					></image>
				</swiper-item>
			</swiper>
		</view>
	</view>

	<!-- 底部功能 -->
	<view
		v-if="!showAnimation"
		class="bottom_funcBox"
		:style="{
			width: clientWidth + 'px',
			bottom: bottom ? bottom + 'px' : '20rpx'
		}"
	>
		<!-- 功能列表 -->
		<view class="funcList">
			<view class="funcItem" @click="koubaiRef.show = true">
				<image :src="imgUrl + 'imgs/worship/func_kb.png'" mode=""></image>
				叩拜
			</view>
			<view class="funcItem" @click="oblationRef.show = true">
				<image :src="imgUrl + 'imgs/worship/func_gp.png'" mode=""></image>
				供品
			</view>
			<view class="funcItem" @click="jingxiangRef.show = true">
				<image :src="imgUrl + 'imgs/worship/func_gx.png'" mode=""></image>
				敬香
			</view>
		</view>
		<!-- 说明列表 -->
		<view class="introList">
			<view class="introItem" @click="detailDialog.show = true">
				神仙说明
				<image :src="imgUrl + 'imgs/worship/arrow.png'" mode=""></image>
			</view>
			<view class="introItem" @click="goUrl('/subPages/worship/practice_detail')">
				修行详情
				<image :src="imgUrl + 'imgs/worship/arrow.png'" mode=""></image>
			</view>
		</view>
	</view>

	<!-- 滚动弹幕 -->
	<view
		v-if="!showAnimation"
		class="bubbleBox"
		:style="{
			width: clientWidth + 'px',
			bottom: bottom ? `calc(${bottom}px + 262rpx)` : '262rpx'
		}"
	>
		<rowBubble
			ref="rowBubbleRef"
			:list="bubbleList"
			:isClearInterval="isClearInterval"
		></rowBubble>
	</view>

	<!-- 详情弹框 -->
	<u-overlay :show="detailDialog.show">
		<view class="introDetail">
			<view class="introDetail_content">
				{{ detail.worshipPeopleTitle }}
				<view class="introDetail_birth">
					<image
						src="http://112.124.50.179:8888/imgs/worship/worship_birth.png"
						mode=""
					></image>
					圣诞日：{{ toChineseCanlender(detail.lunarBirthday) }}
				</view>
			</view>
			<image
				class="closeIcon"
				@click="detailDialog.show = false"
				:src="imgUrl + 'imgs/worship/close.png'"
				mode=""
			></image>
		</view>
	</u-overlay>

	<!-- 特效 -->
	<view class="texiao_box">
		<view class="gif">
			<image
				class="gb"
				src="http://112.124.50.179:8888/imgs/home/gb.gif"
				v-if="animation.gb"
			></image>
			<image
				class="jg"
				src="http://112.124.50.179:8888/imgs/home/jg.gif"
				v-if="animation.jg"
			></image>
		</view>
	</view>

	<!-- 叩拜弹框 -->
	<koubai ref="koubaiRef" @koubai="handleKoubai"></koubai>

	<!-- 敬香弹框 -->
	<jingxiang ref="jingxiangRef" :peopleId="peopleId" @finish="finishJingXiang"></jingxiang>

	<!-- 贡品弹框 -->
	<oblation
		ref="oblationRef"
		:peopleId="peopleId"
		@finish="finishOblation"
		:offeringType="4"
		:titleTxt="'供品'"
	/>

	<!-- 祈福弹框 -->
	<qifu ref="qifuRef" :peopleId="peopleId" @finish="getDetail" />

	<!-- 还愿动画 -->
	<huanyuan
		ref="huanyuanRef"
		:worshipPeopleId="peopleId"
		:ybCoinNumber="ybCoinNumber"
		@finish="finishJieqian"
	></huanyuan>

	<!-- 抽签动画 -->
	<chouqian
		ref="chouqianRef"
		:lotsType="lotsType"
		:ybCoinNumber="ybCoinNumber"
		@jieqian="finishJieqian"
	></chouqian>

	<!-- 购买动画效果 -->
	<buyAni ref="buyAniRef" :pics="aniPics" />
</template>

<script setup>
import { onUnload, onLoad, onReady, onHide, onShow } from '@dcloudio/uni-app';
import {
	ref,
	reactive,
	computed,
	provide,
	onMounted,
	onBeforeUnmount,
	nextTick,
	getCurrentInstance
} from 'vue';
import { imgUrl } from '@/external/utils/imgUrl.js';
import koubai from '@/subPages/common/koubai.vue';
import oblation from '@/subPages/common/oblation.vue';
import buyAni from '@/subPages/common/buyAni.vue';
import qifu from './components/qifu.vue';
import rowBubble from '@/components/bubble/rowBubble.vue';
import navigatorComp from '/components/navigator/index.vue';
import jingxiang from './components/jingxiang.vue';
import huanyuan from './components/huanyuan.vue';
import chouqian from './components/chouqian.vue';
import WorshipApi from '@/API/worship';
import CommonApi from '@/API/commenApi';
import { toChineseCanlender } from '@/utils/time.js';
import { preloadImages } from '@/utils/preloadImages.js';
import store from '@/store/index.js';

//微信小程序上支持类型穿透
defineOptions({
	options: {
		styleIsolation: 'shared'
	}
});

const worshipApi = new WorshipApi();
const commonApi = new CommonApi();

// #ifdef MP-WEIXIN
const bgcTop = ref(getApp().globalData.navHeight); //背景色高度
// #endif
// #ifndef MP-WEIXIN
const bgcTop = ref(getApp().globalData.navHeight + uni.upx2px(80)); //背景色高度
// #endif
const instance = getCurrentInstance();

const navHeight = getApp().globalData.navHeight;
const statusBarHeight = getApp().globalData.statusBarHeight;
const windowWidth = uni.getSystemInfoSync().windowWidth;
const clientWidth = document?.body.clientWidth || uni.getSystemInfoSync().screenWidth;
const bgcHeight = document?.body.clientHeight || uni.getSystemInfoSync().screenHeight;
const bottom = getApp().globalData.bottom; //底部安全区域
const ybCoinNumber = ref(0); //福币余额
const userName = ref(''); //用户名称

/**
 * 详情弹框
 */
const detailDialog = reactive({
	show: false
});

let scrollTop = ref(0); //滚动距离
let scrollTimer = ref(null); //滚动定时器
let scrollStartTime = ref(0); //滚动开始时间
let scrollEndTimer = ref(null); //滚动结束延迟定时器
let isAni = ref(true); //是否开启动画

const koubaiRef = ref(); //叩拜
const jingxiangRef = ref();
const oblationRef = ref();
const qifuRef = ref();
const huanyuanRef = ref();
const chouqianRef = ref();
const buyAniRef = ref();
const rowBubbleRef = ref();

const name = ref();
const peopleId = ref(); //祭拜id
const lotsType = ref(0); //是否是抽签，0否1是
const detail = ref({
	worshipPortrait: ''
}); //祭拜详情

//动画
const animation = reactive({
	jg: false,
	gb: false
});
const showAnimation = ref(false);
let timer = ref(null);

//祭品摆放
const oblationList = reactive({
	leftList: [], //左边摆放
	rightList: [] //右边摆放
});
//蜡烛信息
const lzInfo = ref({});
//滚动条数据
const bubbleList = ref([]);
const aniPics = ref([]);

//音乐播放
const musicPlay = ref(true);
const musicUrl = ref();
let innerAudioContext = null; //音乐对象

const url =
	// 'http://112.124.50.179:28088/file/video/dynamic/2024/311/d12de8e6ce3cbcfd0a522a580287f30a42dc74f9black.ttf';
	'http://112.124.50.179:28088/file/video/dynamic/2024/313/dea9e1d968ecee9b460d7863bd0cef04f42ec66afont.otf';
// const url = 'https://res.wx.qq.com/t/wx_fed/base/weixin_portal/res/static/font/33uDySX.ttf'

onLoad(async (options) => {
	let opt = JSON.parse(options.item);
	peopleId.value = String(opt.peopleId);
	lotsType.value = opt.lotsType;
	name.value = opt.peopleName;
	getDetail();
	if (options.item) {
		uni.setStorageSync('peopleId', opt.peopleId);
	}

	//加载字体包
	uni.loadFontFace({
		family: 'font-test',
		source: `url("${url}")`
	});

	//预加载动图，以防首次加载很慢
	if (lotsType.value) {
		preloadImages([imgUrl + 'imgs/worship/cq.gif']);
	} else {
		preloadImages([imgUrl + 'imgs/worship/dl_success.gif']);
	}

	//获取个人祭拜的物品等信息
	getOfferingInfo();

	//获取音乐
	let tab = options.tab;
	getMusic(tab);
});
onMounted(() => {
	setTimeout(() => {
		console.log(rowBubbleRef.value);
	}, 2000);
});
onShow(() => {
	//打开音乐
	if (musicPlay.value) {
		innerAudioContext?.play();
	}

	// 获取个人的福币信息
	getUserInfo();
});
// 页面卸载
onUnload(() => {
	console.log('onunload');
	//停止滚动，并清除定时器
	rowBubbleRef.value.yScrollSeamlessRef.stopScroll();
	innerAudioContext.destroy();
});
//页面后台
onHide(() => {
	console.log('onHide');
	if (musicPlay.value) {
		musicPlay.value = false;
		innerAudioContext.pause();
	}

	//关闭贡品弹框
	oblationRef.value.show = false;
	//关闭敬香弹框
	jingxiangRef.value.show = false;
	//关闭还愿弹框
	huanyuanRef.value.show = false;
});

/**
 * 获取个人信息
 */
const getUserInfo = async () => {
	if (!store.state.userInfo.userInfo.phoneNumber) {
		await store.dispatch('setUserInfo');
	}
	ybCoinNumber.value = store.state.userInfo.userInfo.ybCoinNumber;
	userName.value =
		store.state.userInfo.userInfo.nickName || store.state.userInfo.userInfo.phoneNumber;
};

/**
 * 获取祭拜人物的详情信息
 */
const getDetail = () => {
	worshipApi
		.getWorshipPeopleInfo({
			worshipPeopleId: peopleId.value
		})
		.then((res) => {
			if (res.code === 0) {
				detail.value = res.data;

				//滚动栏数据
				bubbleList.value = res.data.offeringRecordList || [];
			}
		});
};

//获取个人祭拜的物品等信息
const getOfferingInfo = async () => {
	let res = await worshipApi.getOffered({ worshipPeopleId: peopleId.value });
	if (res.code === 0) {
		// console.log(res.data);
		//祭品摆放
		oblationList.rightList = [];
		oblationList.leftList = [];
		let oList = res.data.items;
		oList?.forEach((item, index) => {
			if (index % 2 === 0) {
				//右边
				oblationList.rightList.push(item);
			} else {
				//左边
				oblationList.leftList.push(item);
			}
		});

		//蜡烛信息
		if (res.data.incenseBurning.offeringId !== 0) {
			lzInfo.value = {
				...res.data.incenseBurning,
				imageUrl:
					imgUrl + 'imgs/worship/worship_lz' + res.data.incenseBurning.offeringId + '.png'
			};
		}
	}
};

/**
 * 返回上一页
 */
const goBack = () => {
	let pages = getCurrentPages();
	if (pages.length > 1) {
		uni.navigateBack();
	} else {
		uni.reLaunch({
			url: '/pages/home/index/index'
		});
	}
};

/**
 * 叩拜行礼
 */
const handleKoubai = async (item, index) => {
	let res = await worshipApi.kowtow({
		worshipPeopleId: peopleId.value,
		kowtowType: item.name
	});
	if (res.code === 0) {
		koubaiRef.value.show = false;
		showGif(index);
	}
};

/**
 * 展示动图
 */
const showGif = (type) => {
	if (type === 1) {
		//跪拜
		showAnimation.value = true;
		if (!timer.value) {
			animation.gb = true;
			timer.value = setTimeout(() => {
				animation.gb = false;
				timer.value = null;
				showAnimation.value = false;
			}, 6500);
		}
	} else if (type === 2) {
		//鞠躬
		showAnimation.value = true;
		if (!timer.value) {
			animation.jg = true;
			timer.value = setTimeout(() => {
				animation.jg = false;
				timer.value = null;
				showAnimation.value = false;
			}, 6500);
		}
	}
};

/**
 * 购买贡品成功
 */
const finishOblation = async (buyList) => {
	//获取个人信息
	await store.dispatch('setUserInfo');
	getUserInfo();

	//购买动画
	aniPics.value = buyList;
	buyAniRef.value.show = true;

	// 动画结束后再执行
	//获取展示祭品
	setTimeout(() => {
		getOfferingInfo();
		getDetail();
	}, 2000);
};

/**
 * 敬香成功
 */
const finishJingXiang = async (buyList) => {
	//获取个人信息
	await store.dispatch('setUserInfo');
	getUserInfo();

	//敬香动画
	aniPics.value = [{ imageUrl: imgUrl + 'imgs/worship/worship_lz' + buyList[0].id + '.png' }];
	buyAniRef.value.show = true;

	// 动画结束后再执行
	//获取展示祭品
	setTimeout(() => {
		getOfferingInfo();
		getDetail();
	}, 2000);
};

/**
 * 解签成功
 */
const finishJieqian = async () => {
	//获取个人信息
	await store.dispatch('setUserInfo');
	getUserInfo();
};

/**
 * 获取音乐
 */
const getMusic = async (tab) => {
	let Ids = 0;
	switch (tab) {
		case '潮俗':
			Ids = 3;
			break;
		case '佛教':
			Ids = 4;
			break;
		case '儒教':
			Ids = 5;
			break;
		case '道教':
			Ids = 6;
			break;
		case '先祖':
			Ids = 7;
			break;
	}
	let res = await commonApi.getMusicList({ Ids });
	if (res.code === 0) {
		musicUrl.value = res.data.items ? res.data.items[0].url : '';
		innerAudioContext = uni.createInnerAudioContext();
		innerAudioContext.autoplay = true;
		innerAudioContext.src = musicUrl.value;
		innerAudioContext.loop = true;

		nextTick(() => {
			console.log('打开音乐');
			innerAudioContext.play();
		});
	}
};

/**
 * 暂停/播放音乐
 */
const clickMusic = () => {
	musicPlay.value = !musicPlay.value;
	if (musicPlay.value) {
		console.log('打开音乐');
		innerAudioContext.play();
	} else {
		console.log('关闭音乐');
		innerAudioContext.pause();
	}
};

const goUrl = (url) => {
	uni.navigateTo({
		url: url
	});
};
</script>

<style lang="scss">
page {
	/* #ifdef H5 */
	padding-top: 0;
	/* #endif */
	background-image: url('http://112.124.50.179:8888/imgs/worship/detail_bgc1.png');
	background-size: 100% 100%;
	background-position: 0 0;
	background-repeat: no-repeat;
	font-family: font-test;
	overflow: hidden;
}

.return_box {
	position: fixed;
	height: 88rpx;
	width: 100%;
	display: flex;
	align-items: center;
	padding-left: 22rpx;
	box-sizing: border-box;
	z-index: 999;
}

@keyframes rotate {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

.rotating-element {
	animation: rotate 5s linear infinite;
	animation-play-state: running; /* 默认运行动画 */
	animation-fill-mode: forwards; /* 在动画结束时保留最后的状态 */
}

.rotating-element.paused {
	animation-play-state: paused; /* 添加一个类来暂停动画 */
}

.edit {
	font-weight: 400;
	font-size: 32rpx;
	color: #f3e0bb;
	line-height: 32rpx;
	text-align: right;
}

.worship_detail_bgc {
	position: fixed;
	left: 50%;
	top: 0;
	transform: translateX(-50%);
	height: 1204rpx;
	background-image: url('http://112.124.50.179:8888/imgs/worship/detail_bgc2.png');
	background-size: 100% 1204rpx;
	background-position: 0 0;
	background-repeat: no-repeat;
}

.worship_detail_border {
	position: fixed;
	left: 50%;
	transform: translateX(-50%);
	width: 376rpx;
	height: 678rpx;

	.worship_detail_border_bgc {
		position: absolute;
		width: 100%;
		height: 100%;
		z-index: -1;
	}

	.worship_detail_border_img {
		position: absolute;
		width: 310rpx;
		height: 590rpx;
		left: 50%;
		top: 32rpx;
		transform: translateX(-50%);
		z-index: 999;
	}
}

.worship_detail_name {
	position: fixed;
	left: 48rpx;
	box-sizing: border-box;
	width: 94rpx;
	border-radius: 8rpx;
	border: 2rpx solid #f3e0bb;
	padding: 8rpx;
	box-sizing: border-box;

	.worship_detail_name_content {
		width: 100%;
		padding: 20rpx 0;
		background: #fdeca4;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		border: 4rpx solid #c4935a;
		box-sizing: border-box;
		writing-mode: vertical-lr;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		letter-spacing: 8rpx;
		font-weight: bold;
		font-size: 30rpx;
		color: #524630;
	}
}

.worship_music {
	position: fixed;
	top: 12vh;
	z-index: 88;
	right: 0;
	font-weight: bold;
	font-size: 20rpx;
	color: #ffffff;
	line-height: 20rpx;
	display: flex;
	align-items: center;
	flex-direction: column;

	.music_box {
		width: 64rpx;
		height: 64rpx;
		margin-bottom: 12rpx;
		background: url('http://112.124.50.179:8888/imgs/worship/music_bgc.png') no-repeat;
		background-size: cover;
	}

	image {
		width: 38rpx;
		height: 38rpx;
	}
}

.right_funcBox {
	position: fixed;
	height: 148rpx;
	width: 132rpx;
	z-index: 3;

	image {
		height: 148rpx;
		width: 132rpx;
	}
}

.worship_detail_desk {
	position: fixed;
	height: 708rpx;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	background-image: url('http://112.124.50.179:8888/imgs/worship/detail_desk.png');
	background-size: 100% 100%;
	background-position: 0 0;
	background-repeat: no-repeat;

	//祭品
	.desk_jp {
		width: 100%;
		height: 144rpx;
		overflow: hidden;
		position: absolute;
		left: 50%;
		top: -50rpx;
		transform: translateX(-50%);
		// background-color: #fff;
		display: flex;
		align-items: flex-end;
		justify-content: center;
	}

	// 香坛
	.desk_xt {
		width: 144rpx;
		height: 144rpx;
		position: relative;

		.tz {
			position: absolute;
			left: 0;
			top: 0;
			width: 144rpx;
			height: 144rpx;
			z-index: 2;
		}

		.lz {
			position: absolute;
			left: 0;
			top: -30rpx;
			width: 144rpx;
			height: 144rpx;
			z-index: 1;
		}
	}

	//果盘
	.jp_left,
	.jp_right {
		flex: 1;
		flex-shrink: 0;
		height: 96rpx;

		image {
			width: 96rpx;
			height: 96rpx;
		}
	}

	.jp_left {
		justify-content: flex-end;
		swiper-item {
			display: flex;
			align-items: center;
			justify-content: flex-end;
		}
	}

	.jp_right {
		justify-content: flex-start;

		swiper-item {
			display: flex;
			align-items: center;
			justify-content: flex-start;
		}
	}
}

.bottom_funcBox {
	position: fixed;
	left: 50%;
	transform: translateX(-50%);

	.funcList {
		position: absolute;
		bottom: 0;
		width: 100%;
		padding: 0 24rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.funcItem {
			width: 216rpx;
			height: 80rpx;
			background: url('http://112.124.50.179:8888/imgs/worship/worship_fucBgc.png') no-repeat;
			background-size: cover;
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: 600;
			font-size: 30rpx;
			color: #292b2a;

			image {
				width: 40rpx;
				height: 40rpx;
			}
		}
	}

	.introList {
		position: absolute;
		bottom: 148rpx;
		width: 100%;
		padding: 0 32rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.introItem {
			width: 192rpx;
			height: 64rpx;
			background: url('http://112.124.50.179:8888/imgs/worship/worship_introBgc.png')
				no-repeat;
			background-size: cover;
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: 500;
			font-size: 24rpx;
			color: #292b2a;

			image {
				width: 32rpx;
				height: 32rpx;
			}
		}
	}
}

.bubbleBox {
	position: fixed;
	left: 50%;
	transform: translateX(-50%);
}

.introDetail {
	width: 574rpx;
	height: 976rpx;
	background: url('http://112.124.50.179:8888/imgs/worship/intro_bgc.png') no-repeat;
	background-size: 100% 100%;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	padding: 84rpx 60rpx;
	box-sizing: border-box;

	.introDetail_content {
		width: 100%;
		height: 100%;
		overflow: scroll;
		text-align: justify;
		font-weight: 500;
		font-size: 28rpx;
		color: #1e201f;
		line-height: 42rpx;
	}

	.introDetail_birth {
		display: flex;
		align-items: center;
		margin-top: 12rpx;
		font-weight: 400;
		font-size: 26rpx;
		color: #333333;
		line-height: 30rpx;

		image {
			width: 44rpx;
			height: 44rpx;
			margin-right: 8rpx;
		}
	}

	.closeIcon {
		position: absolute;
		bottom: -64rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 48rpx;
		height: 48rpx;
	}
}

.texiao_box {
	.gif {
		position: absolute;
		left: 50%;
		bottom: 30rpx;
		transform: translateX(-50%);
		z-index: 99;

		.gb,
		.jg {
			width: 600rpx;
			height: 750rpx;
		}
	}
}
</style>
